<template>
    <div class="table-wrap">
        <flexbox wrap="wrap" class="table-cont">
            <dl
                :class="['table-item', index === cols || index === 0 ? '' : 'border-left-none', index >= cols ? 'border-top-none' : '']"
                :style="itemStyle"
                v-for="(item, index) of cardList"
                :key="index"
            >
                <flexbox justify="center" class="table-item-header">
                    {{ item.name }}
                </flexbox>
                <dt class="table-item-body">
                    <div class="text-cont border" v-if="item.type === 'text'">
                        <a-textarea :placeholder="item.placeholder" ref="textarea" auto-size v-model:value="item.value" />
                    </div>
                    <div class="text-cont" v-if="item.type === 'uploadFile'">
                        <file-cell :fileParams="{ connectType: '竞品文档', type: 0 }" :fileList="item.value" v-if="disabled" />
                        <upload-cell
                            style="width: 100%; margin-top: 0"
                            :fileParams="{ connectType: '竞品文档', type: 0 }"
                            :fileList="item.value"
                            @valueChange="fileChange"
                            v-else
                        />
                    </div>
                </dt>
            </dl>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/util';
import { UploadCell, FileCell } from '@/components';
import { defineComponent, ref, unref, computed } from 'vue';
export default defineComponent({
    components: {
        UploadCell,
        FileCell
    },
    props: {
        cols: { type: Number, default: 6 },
        list: { type: Array, default: () => [] },
        disabled: { type: Boolean, default: false }
    },
    setup(props) {
        const cardList = ref<any[]>([]);
        // 动态计算宽度
        const itemStyle = computed(() => {
            return {
                width: `${100 / props.cols}%`
            };
        });
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            const index = unref(cardList).findIndex((item: any) => item.type === 'uploadFile');
            const { type, name } = unref(cardList)[index];
            cardList.value[index] = {
                type,
                name,
                value: [...fileList]
            };
        };
        let list: any = [];
        list = deepClone(props.list);
        cardList.value = list;
        return {
            cardList,
            itemStyle,
            fileChange
        };
    }
});
</script>
<style scoped lang="less">
.table-wrap {
    .table-cont {
        background: #fff;
        .table-item {
            border: 1px solid #ccc;
            margin-bottom: 0;
            &-header {
                padding: 10px;
                font-weight: bold;
            }
            &-body {
                border-top: 1px solid #ccc;
                padding: 16px;
                height: 200px;
                overflow-y: auto;
                .text-cont {
                    height: 100%;
                    overflow-x: hidden;
                    overflow-y: auto;
                }
                .border {
                    border: 1px solid #d6d6d6;
                }
                ::v-deep(.ant-input[disabled]) {
                    background: transparent;
                }
            }
            ::v-deep(textarea.ant-input) {
                border: none;
                outline: none;
                box-shadow: none;
                min-height: 160px;
            }
        }
        .border-top-none {
            border-top: none;
        }
        .border-left-none {
            border-left: none;
        }
    }
}
</style>
